<template>
  <div class="row wrapper wrapper-content animated fadeInRight">
    <div class="col-lg-4">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>Colors buttons</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
              <li>
                <a href="#">Config option 1</a>
              </li>
              <li>
                <a href="#">Config option 2</a>
              </li>
            </ul>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <p>
            Use any of the available button classes to quickly create a styled button.
          </p>
          <h3 class="font-bold">
            Normal buttons
          </h3>
          <p>
            <button type="button" class="btn btn-w-m btn-default">Default</button>
            <button type="button" class="btn btn-w-m btn-primary">Primary</button>
            <button type="button" class="btn btn-w-m btn-success">Success</button>
            <button type="button" class="btn btn-w-m btn-info">Info</button>
            <button type="button" class="btn btn-w-m btn-warning">Warning</button>
            <button type="button" class="btn btn-w-m btn-danger">Danger</button>
            <button type="button" class="btn btn-w-m btn-link">Link</button>
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>Diferent size</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
              <li>
                <a href="#">Config option 1</a>
              </li>
              <li>
                <a href="#">Config option 2</a>
              </li>
            </ul>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <p>
            If You want larger or smaller buttons You can add
            <code>.btn-lg</code>,
            <code>.btn-sm</code>, or
            <code>.btn-xs</code> class.
          </p>
          <h3 class="font-bold">Button Sizes</h3>
          <p>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
            <button type="button" class="btn btn-default btn-lg">Large button</button>
            <br/>
            <button type="button" class="btn btn-primary">Default button</button>
            <button type="button" class="btn btn-default">Default button</button>
            <br/>
            <button type="button" class="btn btn-primary btn-sm">Small button</button>
            <button type="button" class="btn btn-default btn-sm">Small button</button>
            <br/>
            <button type="button" class="btn btn-primary btn-xs">Mini button</button>
            <button type="button" class="btn btn-default btn-xs">Mini button</button>
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>Outline and Block Buttons</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
              <li>
                <a href="#">Config option 1</a>
              </li>
              <li>
                <a href="#">Config option 2</a>
              </li>
            </ul>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <p>
            Create block level buttons or outline buttons, by adding
            <code>.btn-block</code> or
            <code>.btn-outline</code>.
          </p>

          <h3 class="font-bold">Outline buttons</h3>
          <p>
            <button type="button" class="btn btn-outline btn-default">Default</button>
            <button type="button" class="btn btn-outline btn-primary">Primary</button>
            <button type="button" class="btn btn-outline btn-success">Success</button>
            <button type="button" class="btn btn-outline btn-info">Info</button>
            <button type="button" class="btn btn-outline btn-warning">Warning</button>
            <button type="button" class="btn btn-outline btn-danger">Danger</button>
            <button type="button" class="btn btn-outline btn-link">Link</button>
          </p>
          <h3 class="font-bold">Block buttons</h3>
          <p>
            <button type="button" class="btn btn-block btn-outline btn-primary">Primary</button>
          </p>
        </div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>3D Buttons</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
              <li>
                <a href="#">Config option 1</a>
              </li>
              <li>
                <a href="#">Config option 2</a>
              </li>
            </ul>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <p>
            To add three diminsion to buttons You can add
            <code>.dim</code> class to button.
          </p>
          <h3 class="font-bold">Three diminsion button</h3>

          <button class="btn btn-primary dim btn-large-dim" type="button">
            <i class="fa fa-money"></i>
          </button>
          <button class="btn btn-warning dim btn-large-dim" type="button">
            <i class="fa fa-warning"></i>
          </button>
          <button class="btn btn-danger  dim btn-large-dim" type="button">
            <i class="fa fa-heart"></i>
          </button>
          <button class="btn btn-primary  dim btn-large-dim" type="button">
            <i class="fa fa-dollar"></i>6</button>
          <button class="btn btn-info  dim btn-large-dim btn-outline" type="button">
            <i class="fa fa-ruble"></i>
          </button>
          <button class="btn btn-primary dim" type="button">
            <i class="fa fa-money"></i>
          </button>
          <button class="btn btn-warning dim" type="button">
            <i class="fa fa-warning"></i>
          </button>
          <button class="btn btn-primary dim" type="button">
            <i class="fa fa-check"></i>
          </button>
          <button class="btn btn-success  dim" type="button">
            <i class="fa fa-upload"></i>
          </button>
          <button class="btn btn-info  dim" type="button">
            <i class="fa fa-paste"></i>
          </button>
          <button class="btn btn-warning  dim" type="button">
            <i class="fa fa-warning"></i>
          </button>
          <button class="btn btn-default  dim " type="button">
            <i class="fa fa-star"></i>
          </button>
          <button class="btn btn-danger  dim " type="button">
            <i class="fa fa-heart"></i>
          </button>

          <button class="btn btn-outline btn-primary dim" type="button">
            <i class="fa fa-money"></i>
          </button>
          <button class="btn btn-outline btn-warning dim" type="button">
            <i class="fa fa-warning"></i>
          </button>
          <button class="btn btn-outline btn-primary dim" type="button">
            <i class="fa fa-check"></i>
          </button>
          <button class="btn btn-outline btn-success  dim" type="button">
            <i class="fa fa-upload"></i>
          </button>
          <button class="btn btn-outline btn-info  dim" type="button">
            <i class="fa fa-paste"></i>
          </button>
          <button class="btn btn-outline btn-warning  dim" type="button">
            <i class="fa fa-warning"></i>
          </button>
          <button class="btn btn-outline btn-danger  dim " type="button">
            <i class="fa fa-heart"></i>
          </button>

        </div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="row">
        <div class="col-lg-6">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>Button dropdowns</h5>
              <div class="ibox-tools">
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                  <li>
                    <a href="#">Config option 1</a>
                  </li>
                  <li>
                    <a href="#">Config option 2</a>
                  </li>
                </ul>
                <a class="close-link">
                  <i class="fa fa-times"></i>
                </a>
              </div>
            </div>
            <div class="ibox-content">
              <p>
                Droppdowns buttons are avalible with any color and any size.
              </p>

              <h3 class="font-bold">Dropdowns</h3>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#" class="font-bold">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>

              <br/>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-warning btn-sm dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <br/>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <div class="btn-group">
                <button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">Action
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#">Action</a>
                  </li>
                  <li>
                    <a href="#">Another action</a>
                  </li>
                  <li>
                    <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li>
                    <a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>Grouped Buttons</h5>
              <div class="ibox-tools">
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                  <li>
                    <a href="#">Config option 1</a>
                  </li>
                  <li>
                    <a href="#">Config option 2</a>
                  </li>
                </ul>
                <a class="close-link">
                  <i class="fa fa-times"></i>
                </a>
              </div>
            </div>
            <div class="ibox-content">
              <p>
                This is a group of buttons, ideal for sytuation where many actions are related to same element.
              </p>

              <h3 class="font-bold">Button Group</h3>
              <div class="btn-group">
                <button class="btn btn-white" type="button">Left</button>
                <button class="btn btn-primary" type="button">Middle</button>
                <button class="btn btn-white" type="button">Right</button>
              </div>
              <br/>
              <br/>
              <div class="btn-group">
                <button type="button" class="btn btn-white">
                  <i class="fa fa-chevron-left"></i>
                </button>
                <button class="btn btn-white">1</button>
                <button class="btn btn-white  active">2</button>
                <button class="btn btn-white">3</button>
                <button class="btn btn-white">4</button>
                <button type="button" class="btn btn-white">
                  <i class="fa fa-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>Icon Buttons</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
              <li>
                <a href="#">Config option 1</a>
              </li>
              <li>
                <a href="#">Config option 2</a>
              </li>
            </ul>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <p>
            To buttons with any color or any size you can add extra icon on the left or the right side.
          </p>

          <h3 class="font-bold">Commom Icon Buttons</h3>
          <p>
            <button class="btn btn-primary " type="button">
              <i class="fa fa-check"></i>&nbsp;Submit</button>
            <button class="btn btn-success " type="button">
              <i class="fa fa-upload"></i>&nbsp;&nbsp;
              <span class="bold">Upload</span>
            </button>
            <button class="btn btn-info " type="button">
              <i class="fa fa-paste"></i> Edit</button>
            <button class="btn btn-warning " type="button">
              <i class="fa fa-warning"></i>
              <span class="bold">Warning</span>
            </button>
            <button class="btn btn-default " type="button">
              <i class="fa fa-map-marker"></i>&nbsp;&nbsp;Map</button>

            <a class="btn btn-success btn-facebook">
              <i class="fa fa-facebook"> </i> Sign in with Facebook
            </a>
            <a class="btn btn-success btn-facebook btn-outline">
              <i class="fa fa-facebook"> </i> Sign in with Facebook
            </a>
            <a class="btn btn-white btn-bitbucket">
              <i class="fa fa-user-md"></i>
            </a>
            <a class="btn btn-white btn-bitbucket">
              <i class="fa fa-group"></i>
            </a>
            <a class="btn btn-white btn-bitbucket">
              <i class="fa fa-wrench"></i>
            </a>
            <a class="btn btn-white btn-bitbucket">
              <i class="fa fa-exchange"></i>
            </a>
            <a class="btn btn-white btn-bitbucket">
              <i class="fa fa-check-circle-o"></i>
            </a>
            <a class="btn btn-white btn-bitbucket">
              <i class="fa fa-road"></i>
            </a>
            <a class="btn btn-white btn-bitbucket">
              <i class="fa fa-ambulance"></i>
            </a>
            <a class="btn btn-white btn-bitbucket">
              <i class="fa fa-star"></i> Stared
            </a>
          </p>

          <h3 class="font-bold">Toggle buttons Variations</h3>
          <p>Button groups can act as a radio or a switch or even a single toggle. Below are some examples click to see what
            happens</p>
          <button data-toggle="button" class="btn btn-primary btn-outline" type="button">Single Toggle</button>
          <button data-toggle="button" class="btn btn-primary" type="button">Single Toggle</button>
          <div data-toggle="buttons-checkbox" class="btn-group">
            <button class="btn btn-primary active" type="button">
              <i class="fa fa-bold"></i> Bold</button>
            <button class="btn btn-primary" type="button">
              <i class="fa fa-underline"></i> Underline</button>
            <button class="btn btn-primary active" type="button">
              <i class="fa fa-italic"></i> Italic</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="row">
        <div class="col-lg-6">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>Circle Icon Buttons</h5>
              <div class="ibox-tools">
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                  <li>
                    <a href="#">Config option 1</a>
                  </li>
                  <li>
                    <a href="#">Config option 2</a>
                  </li>
                </ul>
                <a class="close-link">
                  <i class="fa fa-times"></i>
                </a>
              </div>
            </div>
            <div class="ibox-content">
              <p>
                For buttons you can add
                <code>.btn-circle</code> to rounded buttons and make it circle.
              </p>

              <h3 class="font-bold">Circle buttons</h3>
              <br/>
              <button class="btn btn-default btn-circle" type="button">
                <i class="fa fa-check"></i>
              </button>
              <button class="btn btn-primary btn-circle" type="button">
                <i class="fa fa-list"></i>
              </button>
              <button class="btn btn-success btn-circle" type="button">
                <i class="fa fa-link"></i>
              </button>
              <button class="btn btn-info btn-circle" type="button">
                <i class="fa fa-check"></i>
              </button>
              <button class="btn btn-warning btn-circle" type="button">
                <i class="fa fa-times"></i>
              </button>
              <button class="btn btn-danger btn-circle" type="button">
                <i class="fa fa-heart"></i>
              </button>
              <button class="btn btn-danger btn-circle btn-outline" type="button">
                <i class="fa fa-heart"></i>
              </button>
              <br/>
              <br/>
              <button class="btn btn-default btn-circle btn-lg" type="button">
                <i class="fa fa-check"></i>
              </button>
              <button class="btn btn-primary btn-circle btn-lg" type="button">
                <i class="fa fa-list"></i>
              </button>
              <button class="btn btn-success btn-circle btn-lg" type="button">
                <i class="fa fa-link"></i>
              </button>
              <button class="btn btn-info btn-circle btn-lg" type="button">
                <i class="fa fa-check"></i>
              </button>
              <button class="btn btn-warning btn-circle btn-lg" type="button">
                <i class="fa fa-times"></i>
              </button>
              <button class="btn btn-danger btn-circle btn-lg" type="button">
                <i class="fa fa-heart"></i>
              </button>
              <button class="btn btn-danger btn-circle btn-lg btn-outline" type="button">
                <i class="fa fa-heart"></i>
              </button>

            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>Rounded Buttons</h5>
              <div class="ibox-tools">
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                  <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                  <li>
                    <a href="#">Config option 1</a>
                  </li>
                  <li>
                    <a href="#">Config option 2</a>
                  </li>
                </ul>
                <a class="close-link">
                  <i class="fa fa-times"></i>
                </a>
              </div>
            </div>
            <div class="ibox-content">
              <p>
                You can also add
                <code>.btn-rounded</code> class to round buttons.
              </p>

              <h3 class="font-bold">Button Group</h3>
              <p>
                <a class="btn btn-default btn-rounded" href="#">Default</a>
                <a class="btn btn-primary btn-rounded" href="#">Primary</a>
                <a class="btn btn-success btn-rounded" href="#">Success</a>
                <a class="btn btn-info btn-rounded" href="#">Info</a>
                <a class="btn btn-warning btn-rounded" href="#">Warning</a>
                <a class="btn btn-danger btn-rounded" href="#">Danger</a>
                <a class="btn btn-danger btn-rounded btn-outline" href="#">Danger</a>
                <br/>
                <br/>
                <a class="btn btn-primary btn-rounded btn-block" href="#">
                  <i class="fa fa-info-circle"></i> Block rounded with icon button</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
<style>
</style>
